• Final Project: some more details
• Shiny Part II
• Example: Visualizing the World Development Indicators in Shiny

• Prepare a 3-5 min presentation.
• Remember: Everyone can look at your website output even before class or with you.

• SnagIt or Camtasia: Screen capture and recording softwares. Use the 15-day trial. (Win/Mac)
• Screencastify: Record, edit, and share videos directly in the Chrome Browser. Videos up to 5min free. (Win/Mac. Chrome needed)
• Loom: Another Chrome extension for screen capture and video creation. Education accounts are free after verification. (Win/Mac. Chrome needed)

• Each student will provide comments about the visualizations used in another project. These comments can then be used to inform some final adjustments before submission.
  
• We will post links to all final projects on a website.
• Everyone will receive an email specifying which project they should comment on.
• Comments are anonymous and shared on Github.

1. Visualization
   • Is your visualization effective in answering the questions you intended to address? Is the storytelling clear?
     
   • Do the visualizations follow visualization principles?
   • Is it informative and interesting for a user?
   • Does it allow some sensible interactive exploration?
     
2. Implementation
   • What is the quality of your implementation?
   • Is it appropriately polished, robust, and reliable?
     
3. Presentation
   • Are your web site and presentation clear, engaging, and effective?

• OPTION A: Publish you final project on GitHub pages (or any other web host you like). Simply convert your .rmd file into a HTML document and enable GitHub pages for a public(!) repository of your choice to render the result. Or make a simple website with a few child pages linked together.
  
• OPTION B: You can publish (multiple) interactive documents to the ShinyApps hosted service. There are limits to the amount of use, but that should be sufficient for sharing in class.
  
• OPTION C: Use RPubs.com to publish a RMarkdown document directly from R.

Beside the visualizations, your process book, code and data should be linked from the web site as well. Make sure to cite any code, ideas, and other insights you used.

Please start a new RStudio session by opening the file wdi-shiny_part1.Rproj to follow along in the tutorial.

1. Building a simple shiny app
2. Using reactive functions to customize behavior
3. Make it pretty - today’s lecture

ui <- fluidPage()

## <div class="container-fluid"></div>

sliderInput(inputId = "num",
  label = "Choose a number",
  value = 25, min = 1, max = 100)

## <div class="form-group shiny-input-container">
##   <label class="control-label" for="num">Choose a number</label>
##   <input class="js-range-slider" id="num" data-min="1" data-max="100" data-from="25" data-step="1" data-grid="true" data-grid-num="9.9" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-data-type="number"/>
## </div>

plotOutput("myPlot")

## <div id="myPlot" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>

• the ui() part of your app creates HTML representations of your R functions
• fluidPage() is a quick set up of the UI to call the output of a complete HTML page to the browser

• fluidRow() and column() simply divide the page into rows and columns. Think of a table (or grid) as a visual analogue.

• column() adds columns within a row. Each new column goes to the left of the previous column.
• You can specify the width and offset of each column out of 12.

ui <- fluidPage(
  fluidRow(
    column(width = 4,
      "width = 4"
    ),
    column(width = 3, offset = 2,
      "width 3, offset 2"
    )
  )
)
shinyApp(ui, server = function(input, output) { })

• we can group multiple elements into a panel which has its own properties
• provides a simple visual clue for users of what elements are grouped together

ui <- fluidPage(
    wellPanel(
      sliderInput(inputId = "num", 
      label = "Choose a number", 
      value = 25, min = 1, max = 100),
    textInput(inputId = "title", 
      label = "Write a title",
      value = "Histogram of Random Normal Values")
  ),
  plotOutput("hist")
)

server <- function(input, output) {
  output$hist <- renderPlot({
    hist(rnorm(input$num), main = input$title)
  })
}

shinyApp(ui = ui, server = server)

• We can subdivide the user-interface into discrete sections.
• This can be accomplished using the tabsetPanel() function.

ui <- fluidPage(title = "Random generator",
   tabsetPanel( 
     tabPanel(title = "Normal data",
      plotOutput("norm"),
      actionButton("renorm", "Resample")
    ),
    tabPanel(title = "Uniform data",
      plotOutput("unif"),
      actionButton("reunif", "Resample")
    ),
    tabPanel(title = "Chi Squared data",
      plotOutput("chisq"),
      actionButton("rechisq", "Resample")
    )
  )
)

server <- function(input, output) {# Excluded for brevity}
shinyApp(server = server, ui = ui)

• you can also add a navigation on the sidebar using a navlistPanel()
• instead of tabs, we thus have list of items in the sidebar
• we can add headings and separators to make things visually appealing and easy for the user

ui <- fluidPage(title = "Random generator",
  navlistPanel(              
    tabPanel(title = "Normal data",
  plotOutput("norm"),
      actionButton("renorm", "Resample")
    ),
    tabPanel(title = "Uniform data",
      plotOutput("unif"),
      actionButton("reunif", "Resample")
    ),
    tabPanel(title = "Chi Squared data",
      plotOutput("chisq"),
      actionButton("rechisq", "Resample")
    )
  )
)
server <- function(input, output) { # omitted for brevity }
shinyApp(server = server, ui = ui)

• you can custom-make your own layout or use one of the several pre-packaged layouts that come with shiny

ui <- fluidPage(
    sidebarLayout(
    sidebarPanel(
      sliderInput(inputId = "num", 
        label = "Choose a number", 
        value = 25, min = 1, max = 100),
      textInput(inputId = "title", 
        label = "Write a title",
        value = "Histogram of Random Normal Values")
    ),
    mainPanel(
      plotOutput("hist")
    )
  )
)

server <- function(input, output) { # omitted for brevity}
shinyApp(ui = ui, server = server)

• The navbarPage() function helps us to create applications with multiple top-level components.
• Note: navbarPage() replaces fluidPage(). Requires a title.

ui <- navbarPage(title = "Random generator",
  tabPanel(title = "Normal data",
    plotOutput("norm"),
    actionButton("renorm", "Resample")
  ),
  navbarMenu(title = "Other data",
    tabPanel(title = "Uniform data",
      plotOutput("unif"),
      actionButton("reunif", "Resample")
    ),
    tabPanel(title = "Chi Squared data",
      plotOutput("chisq"),
      actionButton("rechisq", "Resample")
    )
  )
)
server <- function(input, output) { # omitted for brevity}
shinyApp(server = server, ui = ui)

There are two shiny add-on packages that provide ready-made layouts for Shiny dashboard pages: flexdashboard and shinydashboard.

flexdashboard

Examples: Neighboorhood Diversity, Linked Brushing, Multi Dropdown Data Explorer

shinydashboard

Examples: CRAN downloads streaming, Flights Drill down with dynamic tabs and DB connection, Bus map

• most styling and customization of the appearance of website elements is done through CSS (Cascading Style Sheets)

• if you are interested in learning more about CSS, I recommend the CSS and HTML tutorial at codeacademy

• Shiny uses the popular Bootstrap 3 CSS framwework.

There are three ways Shiny works with CSS. To get CSS into your Shiny App, you can:

1. Add style sheets to the www directory
2. Add CSS to your HTML header
3. Add styling directly to HTML tags

• Lot’s of nice, free themes that work with bootstrap available from http://bootswatch.com/
• Download a theme and add it the www folder of your app.
• Alter anything you want in the global CSS file

ui <- fluidPage(
  theme = "bootstrap_slate.css",  # Saved in the www folder
  tags$h1("My application", style = "color:#DAA520;"), # CSS Style passed directly
  titlePanel("My Application"),
  sidebarLayout(
    sidebarPanel(
      sliderInput("obs",
                  "Number of observations:",
                  min = 0,
                  max = 1000,
                  value = 500)),
    mainPanel(
      plotOutput("distPlot")
    )
  )
)
server <- function(input, output) { # omitted for brevity}
shinyApp(ui, server)

Please start a new RStudio session by opening the file wdi-shiny_part2.Rproj to follow along in the tutorial. Part II starts at line 480.

The Shiny website has plenty of tutorials, code for small examples, a gallery of full projects etc. Check it out.

About 180 Demo Examples are included in the shiny package and can be called directly from R and are all hosted.

For your convenience, I have also added them to this week’s data folder. Let’s take a look.

http://gallery.shinyapps.io/118-highcharter-births

http://gallery.shinyapps.io/086-bus-dashboard

shiny::runApp("data/shiny_examples/086-bus-dashboard")

http://gallery.shinyapps.io/063-superzip-example

shiny::runApp("data/shiny_examples/063-superzip-example")

http://gallery.shinyapps.io/051-movie-explorer

shiny::runApp("data/shiny_examples/051-movie-explorer")